import { reqGetDepartmentList, reqGetScheduleList, reqGetScheduleRuleList } from '@/api/hospital/hospitalList';
import { DepartmentList, ScheduleList, ScheduleRuleList } from '@/api/hospital/model/hostpitalListTypes';
import { Button, Card, Col, Pagination, Row, Table, Tag } from 'antd'
import { ColumnsType } from 'antd/lib/table';
import Tree, { DataNode } from 'antd/lib/tree';

import React, { Key, useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom';

export default function HospitalSchedule() {
    //获取 url hoscode 数据
    let {hoscode} = useParams();

    //所有科室数据
    let [department,setDepartment] = useState<DepartmentList>([])

    //  一节科室的depcode 数据，用于直接展开 一级科室
    let [oneDepcodes,setOneDepcodes] = useState<string[]>([]);

    //当前页码
    let [page,setPage] = useState(1);

    //每页展示数量
    let [limit,setLimit] = useState(5);

    //总数状态
    let [total,setTotal] = useState(0);

    //科室状态
    let [depcode,setDepcode] = useState("");

    //排班规则 状态
    let [bookingScheduleList,setBookingScheduleList] = useState<ScheduleRuleList>([]);

    //排班日期状态
    let [workDate,setWorkDate] = useState("");

    // 医生状态
    let [doctor,setDoctor] = useState<ScheduleList>([]);

    // 医院名称
    let [hosname,setHosname] = useState("");

    // 科室名称
    let [departmentname,setDepartmentname] = useState("")

    //编程式路由
    let navigate = useNavigate();



    
  

    // 获取医院科室 方法
    let getdepartment = async ()=>{
        let result = await reqGetDepartmentList(hoscode as string);
        // console.log(result);
        //获取所有一级科室的 depcode
        let oneDepcode = result.map(item =>{
            return item.depcode;
        });
        //设置一级科室的depcode
        setOneDepcodes(oneDepcode);
        
        //给所有的一级科室 添加  disabled  属性
        let results  = result.map(item =>{
            item.disabled = true;
            return item;
        })

        //设置医院科室数据
        setDepartment(results);

        //获取所有科室里的第一个一级科室下的第一个二级科室的depcode
        setDepcode((result[0].children as DepartmentList)[0].depcode);

    }

    // 计算树结构的高度
    let height = document.documentElement.clientHeight -64 - 34 - 22- 24*2;

    //获取 医院排班规则 方法
    let getScheduleRulelist = async ()=>{
        //请求预约规则
        let ScheduleRule = await reqGetScheduleRuleList({page,limit,hoscode:hoscode as string,depcode});

        // 设置排班状态规则
        setBookingScheduleList(ScheduleRule.bookingScheduleList)
        //设置总数
        setTotal(ScheduleRule.total)

        //设置排班日期状态
        setWorkDate(ScheduleRule.bookingScheduleList[0].workDate);
    }

    //获取医生排班信息  方法
    let getScheduleList =async ()=>{
        //请求  医生排班信息
        let resultlist = await reqGetScheduleList({hoscode:hoscode as string,depcode,workDate});
        // console.log(resultlist);
        //设置医生状态
        setDoctor(resultlist);
        //设置科室名称
        setDepartmentname(resultlist[0].param.depname);
        
    }

    //  初始化请求 医院科室数据
    useEffect(()=>{
        getdepartment()
    },[])

    // 获取医院排班规则数据
    useEffect(()=>{
        // 判断
        if(!depcode)  return;
        getScheduleRulelist();
    },[depcode,page,limit])


    useEffect(()=>{
        if(!workDate) return;
        getScheduleList();
    },[depcode, workDate])
    
    //分页操作
    let change = (page:number,pageSize:number)=>{
        //设置当前页
        setPage(page)
        //设置每页展示数量
        setLimit(pageSize)
    }

    //点击排班日期 更新医生数据
    let changetime = (workdata:string)=>{
        return ()=>{
            // 更新排班日期
            setWorkDate(workdata);
        }
    }

    // 点击 树结构数据 方法
    let selecttree = (selectedKeys:Key[],info:any)=>{
        //点击后 设置 医院名称
        setDepartmentname(info.node.depname);
        //点击后设置医院编号
        setDepcode(info.node.depcode);
    }



    //表格 表头信息
      let columns:ColumnsType<any> = [
        {
            title:"序号",
            render:(text:any,row:any,index:number)=>{
                return index+1;
            },
            align:"center"
        },
        {
            title:"职称",
            dataIndex:"title",
            align:"center"
        },
        {
            title:"号源时间",
            dataIndex:"workDate",
            align:"center"
        },
        {
            title:"总预约数",
            dataIndex:"reservedNumber",
            align:"center"
        },
        {
            title:"剩余预约数",
            dataIndex:"availableNumber",
            align:"center"
        },
        {
            title:"挂号费(元)",
            dataIndex:"amount",
            align:"center"
        },
        {
            title:"擅长技能",
            dataIndex:"skill",
            width:200,
            align:"center"
        }
    ]

  return (
    <>
            <Card>
                {/* 组件的导航 */}
                <div>
                    选择： {hosname}/ {departmentname} / {workDate}
                </div>
                
                {/* 内容主体 */}
                <div className='mt'>
                    <Row gutter={20}>
                        {/* 左侧 树状结构 */}
                        <Col span={6}>
                            <Tree
                                fieldNames={{
                                    title:"depname",
                                    key:"depcode"
                                }}
                                onSelect={selecttree}
                                style={{border:"1px solid #aaa",
                            height:height,overflow:"auto"}}
                               //
                               expandedKeys={oneDepcodes}
                               //
                               treeData={department as []}
                            />
                        </Col>

                        {/* 右侧内容部分 */}
                        <Col span={18}>
                            {/* 预约日期 */}
                            <div>
                               {
                                bookingScheduleList.map(item=>{
                                    return(
                                        <Tag
                                        onClick={changetime(item.workDate)}
                                        style={{cursor:"pointer"}}
                                        key={item.workDate} color={item.workDate === workDate ? "green" : ""}>
                                            <div>{item.workDate} {item.dayOfWeek}</div>
                                            <div>{item.availableNumber} / {item.reservedNumber}</div>
                                        </Tag>
                                    )
                                })
                               }
                                
                            </div>
                            
                            {/* 分页 */}
                            <Pagination 
                            onChange={change}
                            className='mt'
                            current={page} 
                            total={total} 
                            pageSize={limit}
                            pageSizeOptions={[5,8,10,15]}
                            showSizeChanger={true}
                            />


                            {/* 表格 */}
                            <Table rowKey="id" className='mt' dataSource={doctor} columns={columns} pagination={false} />


                            {/* 返回 */}
                            <Button className='mt' onClick={()=>{
                                navigate(-1);
                            }}>返回</Button>

                        </Col>

                    </Row>


                    
                    

                </div>


            </Card>

        
        
        
        
        </>
  )
}
